<style lang="less">
    @import '../styles/unlock.less';
</style>

<template>
    <transition name="show-unlock">
        <div class="unlock-body-con" v-if="showUnlock" @keydown.enter="handleUnlock">
            <div @click="handleClickAvator" class="unlock-avator-con" :style="{marginLeft: avatorLeft}">
                <img class="unlock-avator-img" :src="avatorPath">
                <div  class="unlock-avator-cover">
                    <span><Icon type="unlocked" :size="30"></Icon></span>
                    <p>解锁</p>
                </div>
            </div>
            <div class="unlock-avator-under-back" :style="{marginLeft: avatorLeft}"></div>
            <div class="unlock-input-con">
                <div class="unlock-input-overflow-con">
                    <div class="unlock-overflow-body" :style="{right: inputLeft}">
                        <input ref="inputEle" v-model="password" class="unlock-input" type="password" placeholder="密码同登录密码" />
                        <button ref="unlockBtn" @mousedown="unlockMousedown" @mouseup="unlockMouseup" @click="handleUnlock" class="unlock-btn"><Icon color="white" type="key"></Icon></button>
                    </div>
                </div>
            </div>
            <div class="unlock-locking-tip-con">已锁定</div>
            <div style="position: absolute;top:80px;left:70px" v-show="showyzm">
                <Row>
                    <i-Col span="12">
                    <i-Input v-model="code" placeholder="请输入验证码">
                    </i-Input>
                    </i-Col>
                    <i-Col span="12"><img v-on:click="changeCode" :src="codeimg" alt="验证码"></i-Col>
                </Row>
            </div>
        </div>
        
    </transition>
</template>

<script>
import Cookies from 'js-cookie';
import api from '@/libs/api';
export default {
    name: 'Unlock',
    data () {
        return {
            showyzm:false,
            code:"",
            avatorLeft: '0px',
            inputLeft: '400px',
            password: '',
            check: null,            
            codeimg:wlfData.serverurl+ '/code?w=120&h=30',
        };
    },
    props: {
        showUnlock: {
            type: Boolean,
            default: false
        }
    },
    computed: {
        avatorPath () {
            return localStorage.avatorImgPath;
        }
    },
    methods: {
        changeCode(){
            this.codeimg=wlfData.serverurl+ '/code?w=120&h=30&t='+Date.now();
        },
        validator (callback) {   
            var vm=this;         
            var model={"username": wlfData.userinfo.username,"password":this.password,"code":this.code,'saveName':false};
            api.post("/login/in",model).then(function(response){
                    if(response.data.code==200){
                        callback();
                    }else{
                        vm.$Message.error('密码错误,请重新输入。如果忘了密码，清除浏览器缓存重新登录即可，这里没有做后端验证');
                    }
                    })
        },
        handleClickAvator () {
            this.avatorLeft = '-180px';
            this.inputLeft = '0px';
            this.showyzm=true;
            this.$refs.inputEle.focus();
        },
        handleUnlock () {
            var vm=this;
            this.validator(function(){
                vm.avatorLeft = '0px';
                vm.inputLeft = '400px';
                
            vm.showyzm=false;
                vm.password = '';
                Cookies.set('locking', '0');
                vm.$emit('on-unlock');

            })
        },
        unlockMousedown () {
            this.$refs.unlockBtn.className = 'unlock-btn click-unlock-btn';
        },
        unlockMouseup () {
            this.$refs.unlockBtn.className = 'unlock-btn';
        }
    }
};
</script>
